<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>太谷县遥感大数据综合应用平台</title>
    <link rel="shortcut icon" href="img/logo.ico">
    <script type="text/javascript" include="bootstrap-css" src="./js/include-web.js"></script>
    <script type="text/javascript" src="./openlayers/include-openlayers.js"></script>
    <style>
    	html,body{
    		position: relative;
    		width: 100%;
    		height: 100%;
    	}
.legendBtn {
	width: 36px;
    height: 36px;
    background: rgba(3, 35, 105, 0.85) url(./img/legend_icon.png) no-repeat 7px center;
    border: 1px solid #00ccff;
    color: #02f1e7;
    border-radius: 6px;
    cursor: pointer;
    position: fixed;
    z-index: 1253;
    bottom: 120px;
    left: 20px;
}
.legendBtn1 {
	width: 36px;
    height: 36px;
    background: rgba(3, 35, 105, 0.85) url(./img/legend_icon.png) no-repeat 7px center;
    border: 1px solid #00ccff;
    color: #02f1e7;
    border-radius: 6px;
    cursor: pointer;
    position: fixed;
    z-index: 1253;
    bottom: 120px;
    right: 20px;
}
.legendPanel {
	display: none;
	width: 200px;
    position: fixed;
    left: 60px;
    z-index: 1253;
    bottom: 110px;
}
.legendPanel1 {
	display: none;
	width: 100px;
    position: fixed;
    right: 60px;
    z-index: 1253;
    bottom: 110px;
}
#legend-btn1 {
      padding: 0 20px;
      /* width: 178px; */
      height: 36px;
      line-height: 34px;
       background: rgb(5, 45, 69) ; /* url("img/legend_icon.png") no-repeat 18px center*/
      border: 1px solid #00ccff;
      color: #02f1e7;
      border-radius: 4px;
      cursor: pointer; 
      position: absolute;
      left: 20px;
      z-index: 1253;
      top: 50px;
    }
    #legend-btn2 {
      padding: 0 20px;
      /* width: 178px; */
      height: 36px;
      line-height: 34px;
      background: rgb(5, 45, 69) ; 
       /*background: rgba(3, 35, 105, 0.85) url("img/legend_icon.png") no-repeat 18px center;*/ 
      border: 1px solid #00ccff;
      color: #02f1e7;
      border-radius: 4px;
      cursor: pointer; 
      z-index: 1253;
      position: absolute;
      right: 20px;
      top: 50px;
    }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: rgb(5,45,69);width: 100%;height:95%">
	<div class="legendBtn">
	</div>
	<div class="legendPanel">
		<img src="./img/legend_wj.png" width="100px;" alt="" />
	</div>
	<div class="legendBtn1">
	</div>
	<div class="legendPanel1">
		<img src="./img/legend_wj.png" width="100px;" alt="" />
	</div>
    <div id="legend-btn1" class=""></div>
    <div id="legend-btn2" class=""></div>

<div id="map" style="width: 100%;height:95%"></div>
<input id="swipe" type="range" style="width: 100%;">
<script type="text/javascript">
	$('.legendBtn').click(function() {
		$('.legendPanel').toggle();
	})
	$('.legendBtn1').click(function() {
		$('.legendPanel1').toggle();
	})
	
	console.log("Hello Runoob!")
	//console.log(window.location.search)
	console.log("Hello Runoob!")
    var host ="http://113.0.63.5:8090";
/*    var worldurl = host + '/iserver/services/map-Population/rest/maps/PopulationDistribution',
        worldNighturl = host + '/iserver/services/map-PopulationAndEconomy/rest/maps/2014年人口密度专题图';*/
        
//  var worldurl = host + '/iserver/services/map-chengshiweij/rest/maps/chengshiweij',
//      worldNighturl = host + '/iserver/services/map-lanzcswj/rest/maps/城关区无街道_Level_18@lzcswj';   
//console.log(window.location.search.split('&')[0].split('=')[1],window.location.search.split('&')[1].split('=')[1])
	var worldurl = window.location.search.split('&')[0].split('=')[1]	
	var worldNighturl = window.location.search.split('&')[1].split('=')[1]
    var title1 = window.location.search.split('&')[2].split('=')[1]
    var title2 = window.location.search.split('&')[3].split('=')[1]
    console.log(title1)
    document.getElementById('legend-btn1').innerHTML = decodeURI(title1)
    document.getElementById('legend-btn2').innerHTML = decodeURI(title2)
	/*var worldurl = host + '/iserver/services/map-wap/rest/maps/@two',
        worldNighturl = host + '/iserver/services/map-lanzsgftest/rest/maps/@lanz111@@lanz111';*/

    
       
    var world = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: worldurl
        }),
        projection: 'EPSG:3857'
    });

    var worldNight = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: worldNighturl
        }),
        projection: 'EPSG:3857'
    });

    var map = new ol.Map({
        layers: [world, worldNight],
        target: 'map',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}}),
        view: new ol.View({
            center: [12551106.61 , 4495357.21],
            zoom: 12,
            projection: 'EPSG:3857'
        })
    });

    var swipe = document.getElementById('swipe');
    worldNight.on('precompose', function (event) {
        var ctx = event.context;
        var width = ctx.canvas.width * (swipe.value / 100);

        ctx.save();
        ctx.beginPath();
        ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
        ctx.clip();
    });

    worldNight.on('postcompose', function (event) {
        var ctx = event.context;
        ctx.restore();
    });

    swipe.addEventListener('input', function () {
        map.render();
    }, false);
</script>
</body>
</html>
